﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="rAF-Polyfill.js"></script>
</head>
<body>
    <canvas id="myCanvas1" width="300" height="300"></canvas> 
    <canvas id="myCanvas2" width="300" height="300"></canvas> 

    <script type="text/javascript">
        // requestAnimationFrame Shim  (replaced by using rAF-Polyfill.js ABOVE.)
        //(function () {
        //    var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
        //                                window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
        //    window.requestAnimationFrame = requestAnimationFrame;
        //})();


        function animate(elementId, endPercent) {
            var canvas = document.getElementById(elementId);
            var context = canvas.getContext('2d');
            var x = canvas.width / 2;
            var y = canvas.height / 2;
            var radius = 50;
            var curPerc = 0;
            var counterClockwise = false;
            var circ = Math.PI * 2;
            var quart = Math.PI / 2;

            context.lineWidth = 100;
            context.strokeStyle = '#ad2323';
            context.shadowOffsetX = 0;
            context.shadowOffsetY = 0;
            context.shadowBlur = 10;
            context.shadowColor = '#656565';

            function render(current) {
                context.clearRect(0, 0, canvas.width, canvas.height);
                context.beginPath();
                context.arc(x, y, radius, -(quart), ((circ) * current) - quart, false);
                context.stroke();
                curPerc++;
                if (curPerc < endPercent) {
                    requestAnimationFrame(function () {
                        render(curPerc / 100);
                    });
                }
            }
            render();
        }

        animate('myCanvas1', 65);
        animate('myCanvas2', 45);



        /* requestAnimationFrame testing */
        var animationFrameId;
        (function repeatOften() {
            console.log(Math.random());
            animationFrameId = requestAnimationFrame(repeatOften);
        })();

        $('<input id="stop" type="button" value="stop it" />').appendTo("body");
        $("#stop").on("click", function () {
            cancelAnimationFrame(animationFrameId);
        });
    </script>
</body>
</html>
